<template>
    <view>
        <view class="extension">
            <!--海报切换extension4，比如海报1是extension1，海报2是extension2。。。。。-->
            <view class="extension-content" >
                <img class="poster" :src="imageUrl" />
            </view>
        </view>
        <view class="extension-flex-text">长按上方图片发送给好友</view>
        <view class="extension-fixed">
            <view class="extension-fixed-img" @click="getImageInfo(index)" v-for="(item,index) in bgArr" :key="index">
                <view :class="{'extension-active-content' : bid === index}">
                    <view :class="{'icon icon-dui' : bid === index}"></view>
                </view>
                <image class="extension-fixed-img1" :src="item.small_img"></image>
            </view>
        </view>

    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex'

    let downloadTask

    export default {
        data() {
            return {
                urlparams: {},
                bgArr:[],//背景图大图数组 id image:背景图 short_img:下面小图
                courseInfo: {
                    requestParams: {
                        type: 0,
                        playclassid: 0,
                        bid:1
                    },
                    responseData: {

                    }
                },
                classDetail: {
                    // 请求参数
                    requestParams: {
                        playClassID: ''
                    },
                    // 响应
                    responseData: {

                    }
                },
                imageUrl:'',
                bid:0
            }
        },

        computed: {
            ...mapState([
                'userInfo'
            ]),
            classDetailInfo() {
                return this.classDetail.responseData || {}
            },
            CourseInfo() {
                return (this.courseInfo.responseData && this.courseInfo.responseData.data) || []
            }
        },

        components: {

        },

        methods:{
            init(){
                this.urlparams = this.$root.$mp.query
                this.courseInfo.requestParams.playclassid = this.urlparams.id
                this.courseInfo.requestParams.bid = 1
                this.getShareBg()
                this.classDetail.requestParams.playClassID = this.urlparams.id
            },
            async getShareBg(){
                let res = await this.$lib.$http.post({
                    url:this.$lib.$urlMap.shareBgImage,
                    data:{},
                    needLogin: true
                })
                if(res.code == 1){
                    this.bgArr = res.data.data
                }
                this.getImageInfo();
            },
            getImageInfo(e){
                if(e >= 0){
                    this.bid = e
                }

                this.imageUrl = this.$lib.$config.localMedia + this.bgArr[this.bid].image
                let img_id = this.bgArr[this.bid].id
                this.getImg(img_id);
            },
            async getImg(img_id){
                let res = await this.$lib.$http.post({
                    url:this.$lib.$urlMap.shareImg,
                    data:{ 
                        img_id:img_id,
                        course_id : this.urlparams.id,
                        path:`/h7/pages/index/detail?id=` + this.pages_params.id
                    },
                    needLogin: true
                })
                if(res.code == 1){
                    this.imageUrl = res.data.filename
                }
            },
        },
        onLoad(opts) {
            this.pages_params = opts;
			this.init();
        },
    }
</script>

<style lang="less" scoped>
    page {
        background-color: #282828;
        overflow: hidden;
    }
    uni-page-body>uni-view {
        background-color: #282828;
    }
    button {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
        font-size: inherit;
        text-align: center;
        text-decoration: none;
        border-radius: 0;
        -webkit-tap-highlight-color: transparent;
        overflow: hidden;
        color: #000000;
        background-color: transparent;
        height: 100%;
    }
    .poster{
        position: fixed;
        overflow: hidden;
        width: 91%;
        // min-height: 408px;
    }
    .extension {
        position: fixed;
        overflow: hidden;
        width: 100%;
    }
    .extension-content{
        width: 91%;
        margin: 16px auto;
        overflow: hidden;
        height: 82vh;
    }
    .extension-fixed {
        width: 100%;
        position: fixed;
        bottom: 0;
        background: #fff;
        padding: 10px 3px;
        display: flex;
        overflow-x: scroll;
    }
    .extension-fixed-img {
        display: flex;
        margin: 0 8px;
    }
    .extension-fixed-img1 {
        width: 50px;
        height: 50px;
        border-radius: 8px;
    }
    .extension-fixed .extension-fixed-img:last-child {
        padding-right: 20px;
    }
    .extension-active {
        position: relative;
    }
    .extension-active-content {
        position: absolute;
        width:50px;
        height:50px;
        background: rgba(8, 8, 8, 0.32);
        text-align: center;
        border-radius: 8px;
        line-height: 48px;
		z-index: 9999
    }
    .icon-dui{
        color: #00bb00;
        font-size: 20px;
        line-height: 50px;
    }
    .extension-flex-text{
        background: #ff8721;
        color: #fff;
        position: absolute;
        bottom: 69px;
        width: 100%;
        height: 32px;
        text-align: center;
        line-height: 32px;
    }
</style>
